<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="70%" append-to-body>
      <el-table ref="tblMain" style="margin-top: 10px;" :data="tblMain.items" v-loading.body="tblMain.loading" border
        stripe>
        <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
        <el-table-column prop="supplier" label="经销商名称" align="center"></el-table-column>
        <el-table-column prop="materialName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="retailPrice" label="零售价" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220px">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMaterialById
} from '@/api/carLine'
import tool from '@/tool'
export default {
  name: 'SupplierDialog',
  data () {
    return {
      title: "选择经销商",
      visible: false,
      tblMain: tool.genTableData({
        items: []
      }),
    }
  },
  methods: {
    add (row, parentRow) {
      this.visible = true;
      this.initTableData(row);
    },
    handleSelect (row) {
      this.$emit('ok', row);
      this.visible = false;
    },
    closeNetWorker () {
      this.tblMain.items = [];
      this.visible = false;
    },
    initTableData (row) {
      let me = this
      let param = {
        materialId: row.id,
      }
      me.tblMain.loading = true
      getMaterialById(param).then(res => {
        me.tblMain.loading = false
        let data = res.data
        if (data && data.code == 0) {
          me.tblMain.items = data.data.supplierCity
          me.tblMain.total = data.data.total
        }
      })
    },
  }
}
</script>
